<template>
  <el-scrollbar height="650px">
    <div style="height: 690px">
      <el-scrollbar height="800px">
        <div style="text-align: center;padding: 0px 0px 0px 20px;font-size: 30px">
         费用报表
        </div>
        <div style="width:96%;justify-content: center;display: flex;padding: 20px 25px">
          <div class="dd"><div>库存金额</div><div>126745</div></div>
          <div class="dd"><div>报销金额</div><div>34500</div></div>
          <div class="dd"><div>未报销金额</div><div>6454</div></div>
        </div>
        <div style="height: 600px;display: flex;">
          <div style="width: 60%">
            <div id="container" ref="chart"></div>
          </div>
          <div style="width: 40%">
            <div id="container2" ref="chart2"></div>

            <div id="container3" ref="chart3"></div>
          </div>
        </div>
        <div>
          <div style="width: 45%;float: right">
<!--            <div>早退人数</div>-->
<!--            <el-table :data="tableData" height="450" style="width: 100%">-->
<!--              <el-table-column prop="date" label="部门" width="180" />-->
<!--              <el-table-column prop="name" label="早退名字" width="180" />-->
<!--              <el-table-column prop="address" label="早退次数" />-->
<!--            </el-table>-->
          </div>
          <div style="width: 45%;float: left">

          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {computed, reactive, ref} from "vue";
import {onBeforeMount, onMounted} from "@vue/runtime-core";
import * as echarts from "echarts";
const tableData = [
  {
    date: '后勤部门',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: 'B部门',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '技术部门',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '销售部门',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts = reactive({});
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart2 = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts2 = reactive({});
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart3 = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts3 = reactive({});
//4.定义好echarts的配置数据
let option = {
  title: {
    text: '部门人数'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '0%',
    right: '4%',
    bottom: '6%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['其他部门', '后勤部门', '管理部门', '技术部门', '人事部门', '销售部门']
  },
  series: [
    {
      name: '2023',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    }
  ]
};
let option2 = {
  title: {
    text: '部门报销情况',
    left: 'left'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '5%',

  },
  series: [
    {
      name: '部门迟到人数',
      type: 'pie',
      radius: '50%',
      right:"10%",
      data: [
        { value: 1048, name: '后勤部门' },
        { value: 735, name: '其他部门' },
        { value: 580, name: '技术部门' },
        { value: 484, name: '销售部门' },
        { value: 300, name: '人事部门' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
let option3 = {
  title: {
    // text: '部门早退分布',
    left: 'left'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '5%',
  },
  series: [
    {
      // name: '部门早退人数',
      type: 'pie',
      radius: '50%',
      right:"10%",
      // data: [
      //   { value: 1048, name: 'A部门' },
      //   { value: 735, name: 'B部门' },
      //   { value: 580, name: '技术部门' },
      //   { value: 484, name: '销售部门' },
      //   { value: 300, name: '人事部门' }
      // ],
      // emphasis: {
      //   // itemStyle: {
      //   //   shadowBlur: 10,
      //   //   shadowOffsetX: 0,
      //   //   shadowColor: 'rgba(0, 0, 0, 0.5)'
      //   // }
      // }
    }
  ]
};
//onMounted钩子函数
onMounted(()=>{
  //初始化echarts
  init();
})

//初始化echarts实例方法
const init = ()=>{
  //3.初始化container容器
  myEcharts= echarts.init(chart.value);
  //5.传入数据
  myEcharts.setOption(option);
  //additional：图表大小自适应窗口大小变化
  window.onresize = ()=>{
    myEcharts.resize();
  }
  //3.初始化container容器
  myEcharts2= echarts.init(chart2.value);
  //5.传入数据
  myEcharts2.setOption(option2);
  window.onresize = ()=>{
    myEcharts.resize();
  }
  //3.初始化container容器
  myEcharts3= echarts.init(chart3.value);
  //5.传入数据
  myEcharts3.setOption(option3);
  window.onresize = ()=>{
    myEcharts.resize();
  }
}
</script>

<style scoped>
#container{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
#container2{
  box-sizing: border-box;
  height: 50%;
  width: 100%;
}
#container3{
  box-sizing: border-box;
  height: 50%;
  width: 100%;
}
.dd{margin: 0px 60px}
.dd div{
  text-align: center;
}
</style>